<template>
    <div class="article-box">
        <!-- <el-breadcrumb separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>文章管理</el-breadcrumb-item>
        </el-breadcrumb> -->

        <el-card>
            <template #header>
                <div class="card-header-content">
                    <span>共 {{ totalCount }} 条记录</span>
                </div>
                <div class="card-header-content">
                    <el-button round @click="onOpen(ARTICLE_CONSTANT.ARTICLE_OPS_TYPE.add, '')">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <span>新增文章</span>
                    </el-button>
                </div>
            </template>
            <el-table :data="articleList" border stripe>
                <el-table-column label="标题" width="300" prop="stem"></el-table-column>
                <el-table-column label="作者" width="180" prop="creator"></el-table-column>
                <el-table-column label="类别" width="100" prop="category"></el-table-column>
                <el-table-column label="点赞" width="140" sortable prop="likeCount"></el-table-column>
                <el-table-column label="浏览数" width="140" sortable prop="views"></el-table-column>
                <el-table-column label="创建时间" width="200" prop="createdAt"></el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-tooltip effect="dark" content="预览" placement="bottom">
                            <el-icon size="20" @click="onOpen(ARTICLE_CONSTANT.ARTICLE_OPS_TYPE.view, row.id)">
                                <View />
                            </el-icon>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="编辑" placement="bottom">
                            <el-icon size="20" @click="onOpen(ARTICLE_CONSTANT.ARTICLE_OPS_TYPE.edit, row.id)">
                                <Edit />
                            </el-icon>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="删除" placement="bottom">
                            <el-icon size="20" @click="onDelArticle(row.id)">
                                <Delete />
                            </el-icon>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-pagination @current-change="onCurrentChange" background layout="prev, pager, next"
                    :total="totalCount" v-model:current-page="query.current">
                </el-pagination>
            </template>
        </el-card>

        <el-drawer v-model="visible" :title="activeTitle" direction="rtl" size="66%">
            <ArticleOps :opsType="curOpsType" :articleId="articleId" :key="count++" @refresh="getArticleList()"
                @onClose="onClose" />
        </el-drawer>
    </div>
</template>

<script setup>
import Article from '@/api/article';
import { computed, reactive, ref } from 'vue';
import useLoginStore from '@/stores/login';
import { ElMessage, ElMessageBox } from 'element-plus';
import ArticleOps from './components/ArticleOps.vue';
import ARTICLE_CONSTANT from '@/constant/article';
const loginStore = useLoginStore()
loginStore.getUserInfoAction()
const visible = ref(false)
const curOpsType = ref('')
const activeTitle = computed({
    get() {
        return ARTICLE_CONSTANT.TITLE_MAP[curOpsType.value] + '文章'
    },
    set(newVal) { }
})
let count = ref(0)
const articleId = ref('')
const onOpen = (opsType, id) => {
    curOpsType.value = opsType
    articleId.value = id
    visible.value = true
}
const query = reactive({
    current: 1,
    pageSize: 10
})
const articleList = ref([])
const totalCount = ref(0)
getArticleList()
async function getArticleList() {
    const { rows, total } = await Article.getArticleListApi(query)
    articleList.value = rows
    totalCount.value = total
}
const onDelArticle = async articleId => {
    try {
        await ElMessageBox.confirm(
            '此操作不可逆，确认删除该文章？',
            '温馨提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
        await Article.delArticleApi(articleId)
        ElMessage.success('删除文章成功！')
        getArticleList()
    } catch (e) { }
}
const onCurrentChange = newVal => {
    query.current = newVal
    getArticleList()
}
const onClose = () => visible.value = false
</script>

<style lang="scss">
.el-message-box {
    .el-button {
        border: none;
    }

    .el-button:nth-child(2):active {
        background: var(--el-color-warn);
    }

    .el-button:nth-child(2):hover {
        background: var(--el-color-warn);
    }

    .el-button:nth-child(2) {
        background: var(--el-color-primary);
    }

    .el-button:nth-child(1):hover {
        color: white;
        background: gray;
    }

    .el-button:nth-child(1):active {
        color: (255, 255, 255, 0.8);
        background: rgb(188, 188, 188);
    }

    .el-button:nth-child(1) {
        color: (255, 255, 255, 0.8);
        background: rgb(188, 188, 188);
    }
}
</style>

<style scoped lang="scss">
.article-box {

    .el-card {
        height: 628px;

        :deep(.el-card__header) {
            height: 50px;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .card-header-content {
                margin: 5px 30px;
                font-size: 17px;

                .el-button {
                    background: #fff;
                }

                .el-button:hover {
                    color: #fff;
                    background: var(--el-color-primary);
                }

                .el-button:active {
                    color: #fff;
                    background: var(--el-color-warn);
                }
            }
        }

        /* :deep(.el-card__footer) {
            height: 20px;
            // margin-top: -15px;
            border-top: none;
        } */

        .el-table {

            .el-icon:nth-child(2) {
                margin: 0 35px;
            }
        }

        .el-pagination {
            display: flex;
            justify-content: center;
        }
    }
}
</style>